<template>
  <div class="box">
    <div class="box_login">
      <div class="login_ing">
        <img src="../assets/微信图片_20210929141511.jpg" alt="" />
      </div>
      <el-form
        :model="loginform"
        label-width="100px"
        :rules="loginrules"
        ref="loginformref"
      >
        <el-form-item label="账号：" prop="username">
          <el-input
            type="text"
            v-model="loginform.username"
            prefix-icon="iconfont icon-user"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input
            type="password"
            v-model="loginform.password"
            prefix-icon="iconfont icon-showpassword"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="Sign('loginform')">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import uri from "../config/uri";
export default {
  data() {
    return {
      loginform: {
        username: "admin",
        password: "123456",
      },
      loginrules: {
        username: [
          { required: true, message: "账号不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    Sign() {
      this.$refs.loginformref.validate((valid) => {
        if (valid) {
          this.$http.post(uri.postlogin, this.loginform).then((res) => {
            // console.log(res);
            if (res.meta.status == 200) {
              this.$message.success(res.meta.msg);
              window.sessionStorage.setItem("token", res.data.token);
              this.$router.push("/home")
            } else {
              this.$message.error(res.meta.msg);
            }
          });
        } else {
          this.$message.error(res.meta.msg);
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
html {
  height: 100vh;
}
.box {
  height: 100vh;
  background-color: #3d3d3d;
  .box_login {
    width: 400px;
    height: 300px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .login_ing {
      width: 160px;
      height: 160px;
      overflow: hidden;
      border-radius: 50%;
      position: absolute;
      top: -100px;
      left: 50%;
      transform: translate(-50%);
      img {
        width: 100%;
      }
    }
  }
}
.el-form {
  position: absolute;
  left: 20px;
  bottom: 40px;
}
</style>
